<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    
    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>
    

    <view v-for="item in arr" :key="item" style="color:#ff0000">
      {{ item }}
    </view>
    
    <view v-for="(item, index) in 6" :key="index" style="color:#00ff00;">
      <view :class="'list-' + (index % 2)">{{ index + 2 }}</view>
    </view>
    
    <view v-for="(value, name, index) in object" :key="index">
      {{ index }}---{{ name }}---{{ value }}
    </view>
    
    <view v-for="item in arr" :key="item.id">
      <view style="color:#333300;">{{ item.id }}:{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      number: 1,
      ok: true,
      message: 'Hello Vue!',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'wechat' },
		{id: 4, name: 'Android'},
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2025-05-20'
      }
    }
  }
}
</script>
